<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="ut.title" :name="ut.key" :key="ut.key" v-for="ut in UserTypeList">
        <div>
          <el-input
            v-model="userViewModel.UserName"
            size="small"
            placeholder="姓名"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="queryUser"
          />
          <el-input
            v-model="userViewModel.LoginName"
            size="small"
            placeholder="登录名"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="queryUser"
          />
          <el-input
            v-model="userViewModel.MobilePhone"
            size="small"
            placeholder="手机号"
            style="width: 200px;"
            class="filter-item"
            @keyup.enter.native="queryUser"
          />
          <el-button type="primary" @click="queryUser" size="small" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="handleAdd" size="small" icon="el-icon-plus">新增</el-button>
          <el-button type="primary" @click="refreshUser" size="small" icon="el-icon-refresh">刷新</el-button>
          <el-button
            v-waves
            style="margin-left: 10px;"
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-upload"
            @click="handlesgmwUpload"
          >导入用户信息</el-button>
        </div>
        <el-table
          v-loading="loading"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          :data="SGMWuserList"
          style="width: 100%;margin-top:30px;"
          height="630"
          border
          @sort-change="sortChange"
        >
          <el-table-column label="姓名">
            <template slot-scope="scope">{{ scope.row.UserName }}</template>
          </el-table-column>
          <el-table-column label="登录名">
            <template slot-scope="scope">{{ scope.row.LoginName }}</template>
          </el-table-column>
          <el-table-column label="手机号">
            <template slot-scope="scope">{{ scope.row.MobilePhone }}</template>
          </el-table-column>
          <el-table-column label="生日">
            <template slot-scope="scope">{{ scope.row.BirthdayStr}}</template>
          </el-table-column>
          <el-table-column label="邀请码">
            <template slot-scope="scope">{{ scope.row.InviteCode }}</template>
          </el-table-column>
          <el-table-column label="创建时间" sortable="custom" prop="CreateTime">
            <template slot-scope="scope">{{ scope.row.CreateTime}}</template>
          </el-table-column>
          <el-table-column align="center" width="240" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleRole(scope)"
                icon="el-icon-check"
              >分配角色</el-button>
              <!-- <el-button type="text" size="mini" @click="handleMenu(scope)" icon="el-icon-check">权限</el-button> -->
              <el-button type="text" size="mini" @click="handleEdit(scope)" icon="el-icon-edit">编辑</el-button>
              <el-button
                type="text"
                size="mini"
                @click="handleDelete(scope)"
                icon="el-icon-delete"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
        <div class="block" style="float:right;margin-top:15px;" v-if="userViewModel.total>0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="userViewModel.page"
            :page-sizes="[10, 20, 30, 40,100]"
            :page-size="userViewModel.pageSize"
            @prev-click="lastPage"
            @next-click="nextPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="userViewModel.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑用户':'新增用户'"
      width="50%"
      top="3vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="user"
        ref="user"
        :rules="rules"
        label-width="80px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="登录名" prop="LoginName">
              <el-input v-model="user.LoginName" :disabled="dialogType==='edit'" placeholder="登录名">
                <!-- <template slot="append">@qdlsai.org</template> -->
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="UserName">
              <el-input v-model="user.UserName" placeholder="姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学校" prop="OrgCode">
              <el-select v-model="user.OrgCode" placeholder="请选学校" style="width:100%">
                <el-option
                  v-for="item in allOrg"
                  :key="item.org_code"
                  :label="item.org_name"
                  :value="item.org_code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="头像" prop="ShowHeadPhoto">
              <el-upload
                class="avatar-uploader"
                id="uploadimginput"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="user.ShowHeadPhoto" :src="user.ShowHeadPhoto" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dialogType!='edit'">
          <el-col :span="12" >
            <el-form-item label="密码" prop="Password">
              <el-input v-model="user.Password" type="password" placeholder="密码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="ConfirmPassword">
              <el-input v-model="user.ConfirmPassword" type="password" placeholder="确认密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="移动电话" prop="MobilePhone">
              <el-input v-model="user.MobilePhone" placeholder="移动电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="Position">
              <el-input v-model="user.Position" placeholder="职务" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="Email">
              <el-input v-model="user.Email" placeholder="邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="Birthday">
              <el-date-picker
                v-model="user.Birthday"
                style="width: 100%;"
                type="date"
                format="yyyy-MM-dd"
                placeholder="出生日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="Sex">
              <template>
                <el-radio-group v-model="user.Sex">
                  <el-radio v-for="item in sexList" :label="item" :key="item">{{item}}</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="个人简介">
              <el-input
                :autosize="{ minRows: 4, maxRows: 9}"
                v-model="user.Remark"
                type="textarea"
                placeholder="个人简介"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">关闭</el-button>
        <el-button type="primary" @click="confirmUser">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogRoleVisible" :title="'分配角色'" :close-on-click-modal="false">
      <el-form :model="userRole" ref="userRole" label-width="100px" label-position="right">
        <el-form-item label="姓名">{{userRole.UserName}}</el-form-item>
        <el-form-item label="角色">
          <el-tree
            ref="uRole"
            :data="roles"
            :props="defaultRoleProps"
            show-checkbox
            default-expand-all
            node-key="id"
            class="permission-tree"
            :check-strictly="true"
          />
        </el-form-item>
        <div style="text-align:right">
          <el-button type="danger" @click="dialogRoleVisible=false">关闭</el-button>
          <el-button type="primary" @click="confirmRole">确认</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="dialogTreeVisible" :title="'分配菜单'" :close-on-click-modal="false">
      <el-form :model="userTree" ref="userTree" label-width="100px" label-position="right">
        <el-form-item label="姓名">{{userTree.UserName}}</el-form-item>
        <el-form-item label="菜单">
          <el-tree
            ref="tree"
            :data="routesData"
            :props="defaultProps"
            show-checkbox
            default-expand-all
            node-key="id"
            class="permission-tree"
          />
        </el-form-item>
        <div style="text-align:right">
          <el-button type="danger" @click="dialogTreeVisible=false">关闭</el-button>
          <el-button type="primary" @click="confirmTree">确认</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- -------批量导入销售助手 dialog--------- -->
    <el-dialog
      :visible.sync="upDialogFormVisible"
      title="批量导入销售助手"
      :close-on-click-modal="false"
      @close="closeupDialog"
      width="75%"
      top="6vh"
    >
      <template>
        <info-upload :dateText="randomNum" :ac="activeName" ref="upstu"></info-upload>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="SGMWVisible"
      title="批量导入用户"
      :close-on-click-modal="false"
      @close="closePlatDialog"
      width="75%"
      top="6vh"
    >
      <template>
        <SGMWInfoUpload :dateText="randomNum" :ac="activeName" ref="USER"></SGMWInfoUpload>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="ISVVisible"
      title="批量导入"
      :close-on-click-modal="false"
      @close="closeISVVisible"
      width="75%"
      top="6vh"
    >
      <template>
        <ISVInfoUpload :dateText="randomNum" :ac="activeName" ref="TEACHER"></ISVInfoUpload>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="jkVisible"
      title="批量导入"
      :close-on-click-modal="false"
      @close="closejkDialog"
      width="75%"
      top="6vh"
    >
      <template>
        <JKInfoUpload :dateText="randomNum" :ac="activeName" ref="jk"></JKInfoUpload>
      </template>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogJKVisible"
      :title="'学生信息'"
      width="50%"
      top="20vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="user"
        ref="user"
        label-width="120px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录名:" prop="UserName">{{user.LoginName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经销商号:" prop="Unumber">{{user.AgentNumber }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工编号:" prop="Unumber">{{user.Unumber}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名:" prop="UserName">{{user.UserName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号:" prop="CardNo">{{user.MobilePhone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码:" prop="CardNo">{{user.CardNo}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogJKVisible=false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogJXSVisible"
      :title="'讲师信息'"
      width="50%"
      top="20vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="user"
        ref="user"
        label-width="120px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="职员名称:" prop="UserName">{{user.UserName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职员代码:" prop="Unumber">{{user.Unumber}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经销商名称:" prop="AgentName">{{user.AgentName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经销商岗位:" prop="AgentJobName">{{user.AgentJobName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经销商部门:" prop="AgentDepart">{{user.AgentDepart}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SGMW备案岗位:" prop="SGMWRecordJob">{{user.SGMWRecordJob}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号码:" prop="CardNo">{{user.CardNo}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期:" prop="Birthday">{{user.BirthdayStr}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogJXSVisible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script src="@/js/user/index.ts">

</script>